<template>
  <form-item title="谷歌验证码" value="google_check">
    <el-radio-group v-model="data.query.google_check" size="large" @change="chooseGoogle">
      <el-radio-button label="不验证" :value="0" />
      <el-radio-button label="验证" :value="1" />
    </el-radio-group>
  </form-item>
  <form-item title="谷歌Url：" value="google_url" v-show="data.query.google_check" style="height:auto">
    <QrcodeVue :value="data.query.google_url" :size="140" fg-color="#000" />
    <el-input class="marginT5" v-model="data.query.google_url" type="text" readonly />
  </form-item>
  <form-item title="谷歌秘钥：" value="google_secret" v-show="data.query.google_check">
    <el-input class="marginT5" v-model="data.query.google_secret" type="text" readonly />
  </form-item>
  <form-item title="谷歌验证码：" :pass="data.query.google_check ? true : false" value="google_code"
    v-show="data.query.google_check">
    <el-input class="marginT5" v-model="data.query.google_code" type="text" placeholder="请输入谷歌验证码" />
  </form-item>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { googleKey  } from '@/api/merchant'
const props = defineProps({
  show: Boolean,
  checkedItem: {
    type: Object,
    default: () => {}
  }
})

const data = reactive({
  query:{
    username:'',
    google_check: 0, // 是否开启谷歌验证码
    google_url: '', // 谷歌二维码 
    google_secret: '', // 谷歌二维码
    google_code: '', // 谷歌验证码
  }
})

watch(
  () => props.checkedItem,
  (value) => {
    Object.assign(data.query,props.checkedItem)
  },
  { deep: true, immediate: true }
)


// 是否开启谷歌验证码
const chooseGoogle = async (val: number) => {
  if (val) {
    if (!data.query.username) {
      data.query.google_check = 0
      return ElMessage({
        type: 'error',
        message: '请输入名称'
      })
    }else{
      if(data.query.google_url) return 
      let res = await googleKey({ username: data.query.username })
      data.query.google_url = res.data.query.google_url
      data.query.google_secret = res.data.query.google_secret
    }
  }
}

</script>

<style lang="scss" scoped></style>
